<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="标题">
        <el-input v-model="form.title"></el-input>
      </el-form-item>

      <el-form-item label="内容" class="rich">
        <VueEditor v-model="form.content" :useCustomImageHandler="true" @image-added="imgUploader" />
      </el-form-item>

      <el-form-item label="分类">
        <el-checkbox-group v-model="checkList">
          <el-checkbox
            :label="item.id"
            v-for="(item,index) in categoryList"
            :key="index"
          >{{item.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="标题">
        <el-upload
          :action="$axios.defaults.baseURL+'/upload'"
          :headers="{
        Authorization:token
      }"
          :file-list="form.cover"
          list-type="picture-card"
          :on-success="coverSuccess"
          :on-remove="coverRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="类型">
        <el-radio-group v-model="form.type">
          <el-radio :label="1">文章</el-radio>
          <el-radio :label="2">视频</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";
export default {
  components: {
    VueEditor
  },
  data() {
    return {
      token: localStorage.getItem("token"),
      categoryList: [],
      checkList: [],
      form: {
        title: "",
        content: "",
        categories: [],
        cover: [],
        type: 1
      }
    };
  },
  watch: {
    checkList(newList) {
      console.log(newList);
      this.form.categories = newList.map(categoryId => {
        return {
          id: categoryId
        };
      });
      console.log(this.form.categories);
    }
  },
  mounted() {
    this.loadCategory();
    if (this.$route.query.id) {
      this.loadPost();
    }
  },
  methods: {
    submit() {
      console.log(this.checkList);
      console.log(this.form);
      this.$axios({
        url: "/post",
        method: "POST",
        data: this.form
      }).then(res => {
        console.log(res.data);
        if (res.data.message == "文章发布成功") {
          this.$message.success("发布成功");
          setTimeout(() => {
            this.$router.push("/postlist");
          }, 1000);
        }
      });
    },
    loadCategory() {
      this.$axios({
        url: "/category",
        method: "GET"
      }).then(res => {
        console.log(res.data.data);
        //数据里面id为0和999需要去掉
        this.categoryList = res.data.data.filter(e => {
          if (e.id == 0 || e.id == 999) {
            return false;
          } else {
            return true;
          }
        });
        console.log(this.categoryList);
      });
    },
    loadPost() {
      const postId = this.$route.query.id;
      this.$axios({
        url: "/post/" + postId
      }).then(res => {
        console.log(res.data);
        //将内容div标签改为p标签
        res.data.data.content = res.data.data.content.replace(/div/g, "p");
        this.checkList = res.data.data.categories.map(e => {
          return e.id;
        });
        console.log("res.data.data.cover");
        console.log(res.data.data.cover);
        // 判断图片有没有http
        const newCover = res.data.data.cover.map((img, index) => {
          const newImg = { ...img };
          if (newImg.url.indexOf("http") == -1) {
            newImg.url = this.$axios.defaults.baseURL + newImg.url;
          }
          newImg.uid = index;
          return newImg;
        });
        console.log(newCover);
        res.data.data.cover = newCover;
        this.form = res.data.data;
      });
    },
    imgUploader(file, Editor, cursorLocation, resetUploader) {
      const formData = new FormData();
      formData.append("file", file);
      this.$axios({
        url: "/upload",
        method: "post",
        data: formData
      }).then(res => {
        console.log(res.data);
        const imgUrl = this.$axios.defaults.baseURL + res.data.data.url;
        Editor.insertEmbed(cursorLocation, "image", imgUrl);
        resetUploader();
      });
    },
    coverSuccess(res, file, fileList) {
      // console.log(res);
      console.log(res.data.url);
      console.log(res.data.id);
      // file.url = this.$axios.defaults.baseURL + res.data.url;
      file.id = res.data.id;
      this.form.cover.push(file);
      // console.log(this.form.cover);
    },
    coverRemove(file, fileList) {
      this.form.cover = fileList;
    }
  }
};
</script>

<style lang="less" scoped>
.rich {
  /deep/ .el-form-item__content {
    line-height: normal;
  }
}
</style>